<template>
    <a-menu 
        v-model:selectedKeys="selectedKeys"
        :theme="theme" mode="inline"
    >
        <template v-for="item in lists">
            <a-menu-item v-if="!item.hidden" :key="item.path" @click="menufun(item)">
                <template #icon v-if="item.meta.icon">
                    <svg-icon :type="item.meta.icon"/>
                </template>
                {{item.meta.title}}
            </a-menu-item>
        </template>
          
    </a-menu>
</template>
<script>
import {
} from '@ant-design/icons-vue';
import { 
    reactive,
    toRefs,
    defineComponent 
} from 'vue'
import { 
    useRouter,
    useRoute,
    onBeforeRouteUpdate,
} from 'vue-router'
import { getRouteInfo,deepCopy } from "@/config";
export default defineComponent({
    components: {
    },
    props:{
        menuList:Array,
        theme:String
    },
    setup(props,{emit}) {
        const state = reactive({
            lists:props.menuList,
            theme: props.theme,
            selectedKeys: [],//选中当前菜单
        });
        const router = useRouter()
        const route = useRoute()
        // 获取左边菜单path
        let routeInfo = (path)=>{
            return deepCopy(getRouteInfo(deepCopy(props.menuList),path))
        }
        let letMenuPath = routeInfo(route.path)
        state.selectedKeys = [letMenuPath]

        let initLeftList = (newLetMenuPath)=>{
            let pidItem = []
            for (let i = 0; i < state.lists.length; i++) {
                if(state['lists'][i]['path'] == newLetMenuPath){
                    pidItem = state['lists'][i]
                }
            }
            if(pidItem){0
                emit('returnRightMenu',pidItem.children?pidItem.children:[],pidItem.children?true:false)
            }
        }
        initLeftList(letMenuPath)
        // 动态监听路由变化，选中当前菜单
        onBeforeRouteUpdate((to) => {
            state.selectedKeys = [routeInfo(to.path)];
            initLeftList(routeInfo(to.path))
        });
        // 点击点击子菜单时 调用此函数
        let menufun = (item)=>{
            let menu = item.children?item.children:[]
            if(menu.length>0){
                emit('returnRightMenu',menu,true)
            }else{
                emit('returnRightMenu',menu,false)
                router.push({
                    path: item.path,
                });
            }
        }
        
        return {
            ...toRefs(state),
            menufun,
        }
    },
    
})
</script>
<style scoped>
.ant-menu-inline, .ant-menu-vertical, .ant-menu-vertical-left {
  border-right: 0px solid #f0f0f0!important;
}
</style>